<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>

<body>
  <form action="" name="form">
    <input type="text" name="advName">
    <input type="text" name="advOrder">
    <input type="file" name="advFile" id="file">
    <br>
    <img src="" alt="" id="img">
    <button id="btn">提交</button>
  </form>
</body>
<script>
  const oFile = document.querySelector("#file")
  const oImg = document.querySelector("#img")
  const oBtn = document.querySelector("#btn")


  //收集表单格式
  oBtn.onclick=function(e){

    e.preventDefault()
    //使用form 来设计某个表单的数据 （表单上传)
    let forData = new FormData(document.form)

    console.log(forData);

    console.log(forData.get("advName"));
    console.log(forData.get("advOrder"));
    console.log(forData.get("advFile")); 
    //ajax请求
    axios.put("/updata",forData)
  }
 

  oFile.onchange = function (e) {
    //表单发送改变 并失去焦点触发 change
    //表单改变 触发  input
    console.log(11);
    console.log(e);
    console.log(this); //file按钮
    //当文件上传事件完成，当前的input对象身上有一个files属性，包含了所有文件信息组成的数组
    console.log(this.files); //
    console.log(this.files[0]); //上传文件的第一个
    // e.preventDefault()
    let reader = new FileReader
    const result = reader.readAsDataURL(this.files[0])

    reader.onload = function (e) {
      console.log(e);
      console.log(e.target.result); //真正读的文件
      oImg.src = e.target.result // 将base64设置给img的src
    }
  }


</script>

</html>